<template>
    <div>
      <el-input v-model="searchText" placeholder="请输入搜索关键词"></el-input>
  
      <h2>推荐商品</h2>
      <div class="product-list">
        <div v-for="product in products" :key="product.id" class="product-item">
        <img :src="product.image" alt="product image" :style="{ width: '200px', height: '200px' }">
          <p>{{ product.name }}</p>
          <p>价格：{{ product.price }}</p>
          <el-button @click="addToCart(product)">添加到购物车</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchText: '',
        products: [
          { id: 1, name: '山东红富士苹果 2.5kg装', price: 29.9, image: require('@/assets/product1.jpg') },
          { id: 2, name: '赣南脐橙 2.5kg装', price: 19.9, image: require('@/assets/product2.jpg') },
          { id: 3, name: '商品3', price: 30, },
          // 添加更多商品...
        ]
      };
    },
    methods: {
      addToCart(product) {
        // 在这里可以实现添加商品到购物车的逻辑
        console.log('添加商品到购物车', product);
      }
    }
  }
  </script>
  
  <style>
  .product-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  .product-item {
    width: calc(33.33% - 20px); /* 一行放三个商品，减去间距 */
    margin-right: 20px; /* 设置商品项之间的间距 */
    margin-bottom: 20px;
  }
  </style>